<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>轮播图管理</span>
        <el-button style="float: right" type="primary" @click="dialogFormVisible = true">添加轮播图</el-button>
      </div>
      <el-table
        :data="focusList"
        style="width: 100%">
        <el-table-column
          label="编号"
          width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.Id }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="图片"
          width="180">
          <template slot-scope="scope">
            <img :src="scope.row.ImgUrl" alt="" width="100px">
          </template>
        </el-table-column>
        <el-table-column
          label="名称"
          width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.Title }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="链接地址"
          width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.Link }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.AddTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="是否启用"
          width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.Enable }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!--  // 新增-->
    <el-dialog title="新增轮播图" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="图片" :label-width="formLabelWidth">
          <!--          // 图片上传-->
          <el-upload
            action="http://127.0.0.1:8080/v1/admin/imgUpload/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
          <el-input v-model="form.ImgUrl" type="hidden"></el-input>
        </el-form-item>
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="form.Title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="链接" :label-width="formLabelWidth">
          <el-input v-model="form.Link" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false;addForm()">确 定</el-button>
      </div>
    </el-dialog>

    <!--  // 修改-->
    <el-dialog title="修改轮播图" :visible.sync="dialogFormVisibleEdit">
      <el-form :model="form">
        <el-form-item label="图片" :label-width="formLabelWidth">
          <!--          // 图片上传-->
          <el-upload
            action="http://127.0.0.1:8080/v1/admin/imgUpload/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
          <el-input v-model="form.ImgUrl" type="hidden"></el-input>
        </el-form-item>
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="form.Title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="链接" :label-width="formLabelWidth">
          <el-input v-model="form.Link" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisibleEdit = false;EditForm()">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import {getFocusList, delFocus, addFocus, editFocus} from '@/api/focus'

export default {
  data() {
    return {
      focusList: [],
      dialogFormVisible: false,
      form: {
        ImgUrl: '',
        Title: '',
        Link: '',
        Id: ''
      },
      formLabelWidth: '120px',
      dialogImageUrl: '',
      dialogVisible: false,
      dialogFormVisibleEdit: false
    }
  },
  methods: {
    //  编辑图片
    EditForm() {
      editFocus(this.form).then(con => {
        console.log(con)
      })
    },
    // 添加图片
    addForm() {
      addFocus(this.form).then(con => {
        console.log(con)
        if (con.code) {
          this.getList()
          this.$message({
            message: '添加成功',
            type: 'success'
          });
        } else {
          this.$message({
            message: '添加失败',
            type: 'error'
          });
        }
      })
    },
    // 图片移除
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    // 图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 修改图片被点击
    handleEdit(index, row) {
      this.dialogFormVisibleEdit = true
      this.form = row
      console.log(index, row);
    },
    // 删除图片被点击
    handleDelete(index, row) {
      console.log(index, row);
      delFocus(row.Id).then(response => {
        console.log(response)
        if (response.code) {
          this.getList()
          this.$message({
            message: '删除成功',
            type: 'success'
          });
        } else {
          this.$message({
            message: '删除失败',
            type: 'error'
          });
        }
      })
    },
    // 获取轮播图数据
    getList() {
      getFocusList().then(response => {
        this.focusList = response
      })
    }
  },
  created() {
    this.getList()
  }
}
</script>
